<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/exchangeCode' }"> <i class="el-icon-lx-cascades"></i>兑换码</el-breadcrumb-item>
                <el-breadcrumb-item>兑换码列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container" style="margin-bottom: 30px">
            <el-table :data="tableData" class="table" ref="multipleTable" header-cell-class-name="table-header">
                <el-table-column prop="title" label="兑换码名称"></el-table-column>
                <el-table-column prop="num" label="兑换码数量"></el-table-column>
                <el-table-column prop="prefix" label="兑换码前缀"></el-table-column>
                <el-table-column prop="info[0].name" label="兑换优惠券"></el-table-column>
                <el-table-column label="类型">
                    <template slot-scope="scope">
                        <span class="red">{{ scope.row.info[0].menkan_price > 0 ? '	满减卷' : '无门槛卷' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="优惠内容">
                    <template slot-scope="scope">
                        {{
                            scope.row.info[0].menkan_price > 0
                                ? '满' + scope.row.info[0].menkan_price + '减' + scope.row.info[0].jian_price
                                : '减' + scope.row.info[0].jian_price
                        }}
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="container">
            <div class="handle-box-left">
                <el-button @click="distributeAllSelection" class="mr10" type="success" size="mini">分发</el-button>
                <el-button @click="delAllSelection" class="mr10" type="danger" size="mini">删除</el-button>
                <el-button @click="ProductActivationCode" class="mr10" type="primary" size="mini" v-if="pageTotal !== exchangeCode_number"
                    >生成兑换码</el-button
                >
                <el-button type="text" disabled v-else>全部兑换码已生成</el-button>
            </div>
            <div class="handle-box">
                <el-input v-model="query.keyword" placeholder="输入兑换码" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
            </div>
            <el-table
                v-loading="loading"
                element-loading-text="拼命生成中"
                element-loading-spinner="el-icon-loading"
                :data="activationCodeData"
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column prop="cdkey" label="兑换码"></el-table-column>
                <el-table-column prop="create_time" label="创建时间"></el-table-column>
                <el-table-column prop="nickname" label="兑换用户"></el-table-column>
                <el-table-column prop="use_time" label="兑换时间"></el-table-column>
                <el-table-column label="状态">
                    <template slot-scope="scope">
                        <el-row>
                            <el-button type="warning" size="mini">{{ scope.row.status == 0 ? '未分发' : '已分发' }}</el-button>
                            <el-button type="info" size="mini">{{ scope.row.status == 2 ? '已兑换' : '未兑换' }}</el-button>
                        </el-row>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-row v-if="scope.row.status == 0">
                            <el-button @click="distribute(scope.row.id)" type="success" size="mini">分发</el-button>
                            <el-button @click="deleteRow(scope.row.id, scope.$index)" type="danger" size="mini">删除</el-button>
                        </el-row>
                        <el-button type="text" disabled v-else>已分发</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="query.page"
                    :page-size="query.rows"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import {
    exchangeCodeInfoData,
    exchangeCodeDetailListData,
    productExchangeCodeData,
    distributeExchangeCodeData,
    delExchangeCodeDetailData
} from '../../api/index';
export default {
    // name: 'questionbank_detail',
    data() {
        return {
            query: {
                card_id: this.$route.query.id,
                page: 1,
                rows: 4,
                keyword: ''
            },
            loading: false,
            exchangeCode_number: '',
            tableData: [],
            activationCodeData: [],
            multipleSelection: [],
            delList: [],
            pageTotal: 0
        };
    },
    created() {
        this.getData();
        this.getActivationCodeData();
    },
    methods: {
        getData() {
            exchangeCodeInfoData({ id: this.$route.query.id }).then((res) => {
                this.tableData.push(res.data);
                this.exchangeCode_number = this.tableData[0].num;
            });
        },
        getActivationCodeData() {
            exchangeCodeDetailListData(this.query).then((res) => {
                this.activationCodeData = res.data.list;
                this.pageTotal = res.data.count;
            });
        },
        ProductActivationCode() {
            this.loading = true;
            productExchangeCodeData({ card_id: this.$route.query.id }).then((res) => {
                if (res.code == 1) {
                    this.loading = false;
                    this.$message.success('生成兑换码成功');
                    setTimeout(() => {
                        location.reload();
                    }, 200);
                }
            });
        },
        distribute(id) {
            this.$confirm('确定分发吗？', '提示', {
                type: 'warning'
            }).then(() => {
                distributeExchangeCodeData({ ids: id }).then((res) => {
                    if (res.code == 1) {
                        this.$message.success('分发成功');
                        setTimeout(() => {
                            location.reload();
                        }, 200);
                    }
                });
            });
        },
        //删除
        deleteRow(id, index) {
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            }).then(() => {
                delExchangeCodeDetailData({ ids: id }).then((res) => {
                    if (res.code == 1) {
                        this.$message.success('删除成功');
                        this.tableData.splice(index, 1);
                        setTimeout(() => {
                            location.reload();
                        }, 200);
                    }
                });
            });
        },
        // 多选操作
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 批量分发
        distributeAllSelection() {
            this.$confirm('确定要分发吗？', '提示', {
                type: 'warning'
            }).then(() => {
                const length = this.multipleSelection.length;
                let strID = '';
                this.delList = this.delList.concat(this.multipleSelection);
                for (let i = 0; i < length; i++) {
                    strID += this.multipleSelection[i].id + ',';
                }
                distributeExchangeCodeData({ ids: strID.substring(0, strID.lastIndexOf(',') )}).then((res) => {
                    if (res.code == 1) {
                        this.$message.success('分发成功');
                        this.multipleSelection = [];
                        setTimeout(() => {
                            location.reload();
                        }, 200);
                    }
                });
            });
        },
        // 批量删除
        delAllSelection() {
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            }).then(() => {
                const length = this.multipleSelection.length;
                let str = '';
                let strID = '';
                this.delList = this.delList.concat(this.multipleSelection);
                for (let i = 0; i < length; i++) {
                    str += this.multipleSelection[i].cdkey + ' ';
                    strID += this.multipleSelection[i].id + ',';
                }
                delExchangeCodeDetailData({ ids: strID.substring(0, strID.lastIndexOf(',')) }).then((res) => {
                    if (res.code == 1) {
                        // this.$message.success(`删除了${str}`);
                        this.$message.success('删除成功');
                        this.multipleSelection = [];
                        setTimeout(() => {
                            location.reload();
                        }, 200);
                    }
                });
            });
        },
        // 搜索
        handleSearch() {
            this.$set(this.query);
            this.getActivationCodeData();
        },
        // 分页
        handlePageChange(val) {
            this.$set(this.query, 'page', val);
            this.getActivationCodeData();
        }
    }
};
</script>

<style scoped>
.handle-box-left {
    float: left;
}
.handle-box {
    margin-bottom: 20px;
    float: right;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}

.mr10 {
    margin-right: 10px;
}

.red {
    color: #ea644a;
}
</style>


